<template>
	<div class='Page'>
    <div class="pure-g">
			<div class="pure-u-1-2" @click="changeA3">
				A3 
			</div>
			<div class="pure-u-1-2" @click="changeA4">
				A4
			</div>
		</div>
		<div>
			current: {{type}}
		</div>
	</div>
</template>

<script>
/* eslint-disable */
	export default {
	  name: 'App3',
	  components: {
	  },
	  data(){
	  	return{
				type: 'a3',
				a3borderStyleSheet: null,
				a4borderStyleSheet: null
	  	}
	  },
	  props:[],
	  mounted:function(){
			// create a style sheet and add rule
			var a4borderStyleSheet = document.createElement("style");
			document.head.appendChild(a4borderStyleSheet);
			a4borderStyleSheet.sheet.insertRule('@page { size: A4 }');
			// disable rule
			a4borderStyleSheet.disabled = true;
			this.a4borderStyleSheet = a4borderStyleSheet

			// create a style sheet and add rule
			var a3borderStyleSheet = document.createElement("style");
			document.head.appendChild(a3borderStyleSheet);
			a3borderStyleSheet.sheet.insertRule('@page { size: A3 landscape }');
			// disable rule
			a3borderStyleSheet.disabled = true;
			this.a3borderStyleSheet = a3borderStyleSheet

			// see existing stylesheets
			console.log(document.styleSheets);
	  },
	  methods:{
			changeA3() {
				this.type = 'a3'
				this.a3borderStyleSheet.disabled = false
				this.a4borderStyleSheet.disabled = true

			},
			changeA4() {
				this.type = 'a4'
				this.a3borderStyleSheet.disabled = true
				this.a4borderStyleSheet.disabled = false


			}
	  }
	}
</script>

<style lang="css">
	
</style>